/**
* @description: 通信网管出入工单 --》发起申请
* @author: zhangxia
* @date:
**/
<template>
	<view class="task-monitor-main">
		<!-- <nav-bar class="header" back title="出入登记" @goBack="goBack" /> -->
		<nav-bar class="header" back title="出入登记" @goBack="goBack">
		  <img slot="screen" src="../../../static/img/sx.png" alt="" @click="screen" v-if="currentIndex === '1'">
		</nav-bar>
		<view class="header-bar">
			<!-- 切换tab -->
			<div class="get-state-tab">
				<div class="info-tab-item" :class="currentIndex === '0' ? ' info-tab-current': ''"
					@click="tabChange('0')">出入登记</div>
				<div class="info-tab-item" :class="currentIndex === '1' ? ' info-tab-current': ''"
					@click="tabChange('1')">我登记的</div>
			</div>
		</view>
		<view v-if="currentIndex === '0'" class="mainwrap">
			<!-- main   -->
			<main>
				<van-form ref="ruleForm">
					<view class="commonbj">
						<van-field disabled input-align="right" v-model="guardianName" label="作业监护人"
							:rules="[{ required: true, trigger:'onSubmit'}]" placeholder="请选择" right-icon="arrow"
							required @click-right-icon="handleSelectUser('guardian')" />
					</view>
					<div class="commontitle isrequired">
						操作人员
					</div>
					<view class="commonbj">
						<van-field input-align="right" disabled v-model="memberName" label="班组成员" :rules="memberRule"
							placeholder="请选择" right-icon="arrow" @click-right-icon="handleSelectUser('member')" />
						<van-field right-icon="plus" color="#417ADC" input-align="right" label="其他单位成员"
							@click-right-icon="addoption('personinformation')" />
					</view>
					<van-collapse v-model="activeNames">
						<view class="commonbj" v-for="(item,key) in operatorList" :key="key">
							<van-collapse-item :name="item.name" right-icon="cross" @click-right-icon="">
								<template #title>
									<view class="custom-title">
										<img src="../../../static/img/delete.png" alt=""
											@click="removeType(key, item.name,'operator')">
										{{ item.type }}
									</view>
								</template>
								<van-field :rules="item.nameRules" input-align="right" v-model="item.userName"
									label="姓名" placeholder="请输入" clearable />
								<van-field :rules="item.unitRules" input-align="right" v-model="item.unitName"
									label="单位名称" placeholder="请输入" clearable />
								<van-field :rules="item.phoneRules" input-align="right" v-model="item.phone"
									label="联系方式" placeholder="请输入" clearable />
								<van-field :rules="item.cardRules" input-align="right" v-model="item.idNumber"
									label="身份证号" placeholder="请输入" clearable />
							</van-collapse-item>
						</view>

					</van-collapse>
					<view class="remark-info-container">
						<view><text style="color: #f00">*</text>工作内容</view>
						<van-divider dashed />
						<div class="remark-wrap">
							<van-field type="textarea" class="remark-text" v-model="workContent" placeholder="这里是工作内容信息"
								:rules="[{ required: true, trigger:'onSubmit'}]" />
						</div>
					</view>
					<van-field input-align="right" disabled v-model="planIntoTime" label="计划进入时间" required
						:rules="[{ required: true, trigger:'onSubmit'}]" placeholder="请选择" clearable right-icon="arrow"
						@click-right-icon="onOpenPicker('planIntoTime')" />
					<van-field input-align="right" disabled v-model="planLeaveTime" label="计划结束时间" required
						:rules="[{ required: true, trigger:'onSubmit'}]" placeholder="请选择" clearable right-icon="arrow"
						@click-right-icon="onOpenPicker('planLeaveTime')" />
				</van-form>
				<!--时间选择器-->
				<van-popup v-model="showDatetimePicker" position="bottom">
					<van-datetime-picker type="datetime" :formatter="pickerFormatter" cancel-button-text="清空"
						@confirm="onDatetimeConfirm" @cancel="onDatetimeEmpty" v-model="currentDate"
						:min-date="minDate" />
				</van-popup>
				<van-popup v-model="showSelectUser" position="right">
					<selectUserApprove :guardianUid="guardianUid" :selected.sync="staffList"
						@cancel="onSelUserCancel" />
				</van-popup>
			</main>
			<footer>
				<van-button block @click="submit">提交</van-button>
			</footer>
		</view>
		<view v-else>
			<view class="header-bar list-header">
				<ul class="menu">
					<li v-for="(item,index) in menuList" :key="index" @click="chooseMenu(item, index)">
						<view class="right-box">
							<text class="menu-num" :class="{selectmenu:item.ZT === current}">{{ item.SL }}</text>
							<text class="menu-state" :class="{selectmenu:item.ZT === current}">{{ item.ZTMC }}</text>
						</view>
						<view :class="{sj:item.ZT === current}"></view>
					</li>
				</ul>
			</view>
			<view class="task-list-container" v-if="taskList.length > 0">
				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
					<van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
						<!-- 列表循环   -->
						<view class="task-list" v-for="(item,index) in taskList" :key="index" @click="jump(item)">
							<van-swipe-cell>
								<view class="task-title">
									<view class="task-title-main">
										<text class="task-title-main-text">{{ item.UPDATENAME }}发起的通信网管出入工单</text>
									</view>
									<text class="task-status" :class="color(item.AUDITSTATUS)">
										<text>{{item.AUDITSTATUSNAME}}</text>
									</text>
								</view>
								<hr class="task-hr">
								<view class="top-task-main">
									<text class="task-big-ltitle">发起人:</text>
									<text class="task-small-ltitle">{{ item.UPDATENAME }}</text>
									<text class="task-big-rtitle">发起时间:</text>
									<text class="task-small-rtitle">{{ item.updateTime }}</text>
								</view>
								<template #right v-if="item.AUDITSTATUSNAME === '已撤销'">
									<van-button class="delBtn" @click="handleDel(item)" type="danger" text="删除" />
								</template>
							</van-swipe-cell>
						</view>
					</van-list>
				</van-pull-refresh>
			</view>
			<!--筛选弹窗-->
			<screenPopup :showScreen="showScreen" @closePopup="showScreen=false" @confirm="confirmCondition"
				:otherList="otherList" :typeList="typeList" @reset="reset">
			</screenPopup>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters
	} from 'vuex'
	import navBar from "../../../components/common/nav-bar";
	import selectUserApprove from '../common/selectUserApprove'
	import plateTitle from '../common/plateTitle.vue';
	import screenPopup from "../common/screenPopup2.vue";
	import moment from "moment";
	import {
		Dialog,
		Toast
	} from "vant";
	export default {
		name: 'initiateApplication',
		components: {
			navBar,
			plateTitle,
			selectUserApprove,
			screenPopup
		},
		props: {},
		data() {
			return {
				showScreen: false,
				guardianName: '', // 作业监护人
				guardianUid: [], // 作业监护人id
				memberName: '', // 班组成员
				memberUid: [], // 班组成员id
				showSelectUser: false, //选择人员
				staffType: '',
				staffList: {
					ids: [],
					text: ''
				},
				color: (TASK_STATE) => {
					if (TASK_STATE === '0') {
						return 'left-state-dsp'
					} else if (TASK_STATE === '1') {
						return 'left-state-jj'
					} else if (TASK_STATE === '2') {
						return 'left-state-dzx'
					} else if (TASK_STATE === '3') {
						return 'left-state-ywc'
					} else {
						return 'left-state-ycx'
					}
				},
				refreshing: false, // 是否正在刷新
				isLoading: false,
				finished: false,
				total: 0, // 总条数
				page: 1,
				limit: 20,
				current: '',
				currentIndex: "0",
				// 操作人员
				activeNames: ["0"],
				operatorList: [],
				// 工作情况
				workContent: '',
				// 时间
				currentDate: '',
				minDate: new Date(0),
				showDatetimePicker: false,
				showCompPicker: false,
				pickerType: "",
				planLeaveTime: "",
				planIntoTime: "",
				againId: '', // 再次提交id
				operatorId: '', // 操作人员id
				workId: '', // 工作情况id
				memberRule: [{
					required: true,
					trigger: 'onSubmit'
				}], // 班组成员校验
				otherPeople: [],
				menuList: [],
				typeList: [
					{
						TITLE: '本周',
						VALUE: 1,
					},
					{
						TITLE: '本月',
						VALUE: 2,
					},
					{
						TITLE: '上月',
						VALUE: 3,
					}
				],
				otherList: [{
						TITLE: '按天',
					},
					{
						TITLE: '按月',
					}
				],
				initateTime:1,
			};
		},
		computed: {
			...mapGetters(['userData']),
			stateColor() {
				if (this.stateCode === '1') {
					return 'left-state-dsp'
				} else if (this.stateCode === '2') {
					return 'left-state-jj'
				} else {
					return 'left-state-tg'
				}
			}
		},
		watch: {
			staffList: {
				handler: function(newVal) {
					let staffIdsType = this.staffType + 'Uid' //  guardianUid memberUid
					let staffTextType = this.staffType + 'Name' //  guardianName memberName
					this[staffIdsType] = newVal.ids
					this[staffTextType] = newVal.text
				},
				immediate: true,
				deep: true
			}
		},
		onLoad(options) {
			this.againId = options.againId
			if (options.typeName === 'again') {
				this.selectNetworkManagementDetailI()
			}

			this.selectNetworkManagementList()

		},
		methods: {
			handleDel(item) {
			  let params = {
			    ID:item.WEBMASTERID,
			    userId: this.userData.USERID
			  }
			  Dialog.confirm({
			    message: "是否确认删除？",
			  }).then(() => {
			    this.$api.deleteWebMasterOne(params).then(res => {
			      if(res.code == 0) {
			        Toast.success({
			          message:'删除成功'
			        })
			        this.onRefresh()
			      }else {
			        Toast('删除失败')
			      }
			    })
			  })
			
			},
			confirmCondition(selected, beginTime, endTime) {
				this.initateTime = selected // 发起时间
				this.startTime = beginTime
				this.endTime = endTime
				this.onRefresh()
			},
			screen() {
				this.showScreen = true;
			},
			loadMore() {
				if (this.total > this.taskList.length) {
					this.page = this.page + 1;
					this.selectNetworkManagementList()
				} else {
					this.finished = true;
				}
			},
			tabChange(currentIndex) {
				this.currentIndex = currentIndex;
				this.onRefresh()
			},
			onRefresh() {
				this.refreshing = true;
				this.finished = false;
				this.page = 1;
				this.taskList = [];
				this.selectNetworkManagementList();
			},
			selectNetworkManagementList() {
				
				let auditStatus = this.current
				let params = {
					page: this.page,
					limit: this.limit,
					timeType: this.initateTime,
					startTime: this.startTime,
					endTime: this.endTime,
					updateName: this.searchValue,
					updateUid: this.userData.USERID,
					auditStatus
				}
				this.$api.selectNetworkManagementList(params).then(res => {
					this.isLoading = false;
					this.refreshing = false;
					this.taskList = this.taskList.concat(res.data.taskList.map(item => {
						return {
							updateTime: item.UPDATETIME ? moment(item.UPDATETIME).format(
								'YYYY-MM-DD HH:mm') : null,
							...item
						}
					}));
					let menuMsg = res.data.state_count;
					this.menuList = menuMsg;
					// this.menuList = [{
					// 	count: menuMsg['QB'],
					// 	title: "全部"
					// }, {
					// 	count: menuMsg['DSH'],
					// 	title: "待审批"
					// }, {
					// 	count: menuMsg['SHJJ'],
					// 	title: "审批拒绝"
					// }, {
					// 	count: menuMsg['ZXZ'],
					// 	title: "待执行"
					// }, {
					// 	count: menuMsg['YWC'],
					// 	title: "已完成"
					// }];
					this.total = +res.data.total_number
				})
			},
			// 获取详情
			selectNetworkManagementDetailI() {
				let params = {
					webmasterId: this.againId
				}
				this.$api.selectNetworkManagementDetail(params).then(res => {
					this.guardianUid = res.data.guardianUid
					this.memberUid = res.data.memberUid
					this.guardianName = res.data.guardianName // 获取作业监护人
					this.memberName = res.data.memberName // 获取班组成员
					this.operatorList = res.data.otherPersonnelVo.map(item => {
						this.operatorId = item.otherId
						return {
							...item
						}
					})
					this.workContent = res.data.workContent
					this.planIntoTime = moment(res.data.planIntoTime).format('YYYY-MM-DD HH:mm')
					this.planLeaveTime = moment(res.data.planLeaveTime).format('YYYY-MM-DD HH:mm')
				})
			},
			// 选择人员
			onSelUserCancel() {
				this.showSelectUser = false
			},
			handleSelectUser(t) {
				this.showSelectUser = true
				this.staffType = t;
				if (this.staffType == 'guardian') {
					// 作业负责人id
					this.staffList = {
						ids: !this.guardianName ? [] : this.guardianUid,
						text: this.guardianName
					}
				} else {
					// 班组成员
					this.staffList = {
						ids: !this.memberName ? [] : this.memberUid,
						text: this.memberName
					}
				}
			},
			onOpenPicker(pickerType) {
				if (pickerType === "planIntoTime") {
					this.currentDate =
						this.planIntoTime !== "" ? new Date(this.planIntoTime) : new Date();
				} else if (pickerType === "planLeaveTime") {
					this.currentDate =
						this.planLeaveTime !== "" ? new Date(this.planLeaveTime) : new Date();
				}
				this.pickerType = pickerType;
				this.showDatetimePicker = true;
			},
			pickerFormatter(type, val) {
				if (type === "year") return val + "年";
				if (type === "month") return val + "月";
				if (type === "day") return val + "日";
				if (type === "hour") return val + "时";
				if (type === "minute") return val + "分";
			},
			onDatetimeConfirm(time) {
				let timeString = moment(time).format("YYYY-MM-DD HH:mm");
				if (this.pickerType == "planIntoTime") {
					this.planIntoTime = timeString;
				} else if (this.pickerType == "planLeaveTime") {
					this.planLeaveTime = timeString;
				}
				if (this.planLeaveTime !== '' && new Date(this.planLeaveTime).getTime() < new Date(this.planIntoTime)
					.getTime()) {
					Dialog.alert({
						message: "计划开始时间不可晚于计划结束时间",
						theme: "round-button"
					});
					this.planLeaveTime = "";
				}
				this.showDatetimePicker = false;
			},
			chooseMenu(item, index) {
				this.current = item.ZT ? item.ZT : '';
				this.onRefresh()
			},
			//  列表跳转
			jump(item) {
				uni.navigateTo({
					url: `/pages/operationApprove/communicationNetWork/detailsPendingApproval?webmasterId=${item.WEBMASTERID}&state=${item.AUDITSTATUS}&userId=${item.USERID}&pagetype=${'initial'}`
				})
			
			},
			onDatetimeEmpty() {
				this.showDatetimePicker = false;
				this.planIntoTime = ''
				this.planLeaveTime = ''
			},
			removeType(index, name, type) {
				if (type == "operator") {
					this.operatorList.splice(index, 1);
					if (this.operatorList.length) {
						this.operatorList = this.operatorList.map((item, index) => {
							item.type = '操作人员' + (index * 1 + 1)
							return item
						})
					}
				}

			},
			addoption(type) {
				if (type == 'personinformation') {
					//新增操作人员
					let typestr = "操作人员" + (this.operatorList.length * 1 + 1);
					this.operatorList.push({
						userName: "",
						unitName: "",
						phone: "",
						idNumber: "",
						name: this.operatorList.length,
						type: typestr,
						nameRules: [{
							required: true,
							trigger: 'onSubmit'
						}],
						unitRules: [{
							required: true,
							trigger: 'onSubmit'
						}],
						phoneRules: [{
							required: true,
							trigger: 'onSubmit'
						}],
						cardRules: [{
							required: true,
							trigger: 'onSubmit'
						}],
					})
					this.operatorList.map(item => {
						this.activeNames.push(item.name)
					})
				}
			},
			// 返回
			goBack() {
				
				uni.navigateBack()
			},
			// 提交-按钮
			async submit() {
				let params = {
					guardianUid: this.guardianUid.toString(),
					guardianName: this.guardianName,
					memberUid: this.memberUid.toString(),
					memberName: this.memberName,
					updateUid: this.userData.USERID,
					updateName: this.userData.SUERNAME,
					orgId: this.userData.ORGID,
					otherPersonnelVo: this.operatorList,
					workContent: this.workContent,
					planIntoTime: this.planIntoTime,
					planLeaveTime: this.planLeaveTime
				}
				let flag = null,
					isHasValue = null,
					menbernameIsNull = this.memberName === '' ? true : false,
					isHasOperatorList = this.operatorList.length > 0 ? true : false;
				if (isHasOperatorList) {
					this.operatorList.forEach(item => {
						if (item.userName === '' && item.unitName === '' && item.phone === '' && item
							.idNumber === '') {
							flag = true;
						} else {
							flag = false;
						}
					})
					this.operatorList.forEach(item => {
						if (item.userName !== '' && item.unitName !== '' && item.phone !== '' && item
							.idNumber !== '') {
							isHasValue = true;
						} else {
							isHasValue = false;
						}
					})
				}

				if (menbernameIsNull && isHasOperatorList && flag == true) { //班组成员为空且其他单位成员有新增且内容都为空
					this.memberRule[0].required = true;

				} else if (menbernameIsNull && isHasOperatorList && flag == false) { //班组成员为空且其他单位成员有新增并内容不都为空

					if (isHasValue) { //判断其他单位成员有新增并内容值是否都存在 都有值可以不验证班组成员
						this.memberRule[0].required = false;
					} else {
						this.memberRule[0].required = true;
					}
					this.operatorList.map(item => {
						item.userName === '' ? item.nameRules[0].required = true : item.nameRules[0].required =
							false;
						item.unitName === '' ? item.unitRules[0].required = true : item.unitRules[0].required =
							false;
						item.phone === '' ? item.phoneRules[0].required = true : item.phoneRules[0].required =
							false;
						item.idNumber === '' ? item.cardRules[0].required = true : item.cardRules[0].required =
							false;
						return {
							...item
						}
					})

				} else if (menbernameIsNull && !isHasOperatorList) { //班组成员为空且其他单位成员无新增
					this.memberRule[0].required = true;
				} else if (!menbernameIsNull && isHasOperatorList && flag == true) { //班组成员有值且其他单位成员有新增且值都为空
					this.memberRule[0].required = false;
					this.operatorList.map(item => {
						item.userName === '' ? item.nameRules[0].required = true : item.nameRules[0].required =
							false;
						item.unitName === '' ? item.unitRules[0].required = true : item.unitRules[0].required =
							false;
						item.phone === '' ? item.phoneRules[0].required = true : item.phoneRules[0].required =
							false;
						item.idNumber === '' ? item.cardRules[0].required = true : item.cardRules[0].required =
							false;
						return {
							...item
						}
					})
				}
				await this.$refs.ruleForm.validate().then(() => {
					Dialog.confirm({
						message: "是否确认提交？",
					}).then(() => {
						this.$api.addWebMasterOne(params).then((res) => {
							if (res.code == 0) {
								Toast.success({
									message: '发起成功',
									onOpened: () => {
										uni.navigateTo({
											url:'/pages/operationApprove/index/index',
										})
									}
								})
							} else {
								Toast.success({
									message: '发起失败'
								})
							}
						})
					})
				}).catch(() => {
					Toast('请完善内容');
				})
			},
		}
	};
</script>
<style scoped lang="scss">
	.task-monitor-main {
		height: 100vh;
		background: #F2F6FA;
		overflow: hidden;
		.header {
		  position: sticky;
		  top: 0;
		
		  img {
		    width: px2vw(48);
		    margin-right: px2vw(40);
		  }
		
		  .header-right {
		    display: flex;
		
		    /deep/ .van-icon {
		      font-size: px2vw(52);
		      font-weight: bold;
		    }
		
		    /deep/ .van-icon-scan {
		      margin-right: px2vw(12);
		    }
		
		    /deep/ .van-icon-filter-o {
		      margin-left: px2vw(12);
		    }
		  }
		}
		.header-bar {
			height: px2vh(220);
			border-radius: 0 0 px2vh(40) px2vh(40);
			background: #417ADC;
			margin-bottom: px2vh(20);
			display: flex;
			justify-content: center;
			.get-state-tab {
				width: calc(100% - #{px2vw(60)});
				height: px2vh(120);
				border-radius: px2vw(20);
				box-sizing: border-box;
				// margin: px2vh(40) px2vw(30) px2vh(37);
				background-color: rgba(255, 255, 255, 0.4);
				display: flex;
				justify-content: center;
				align-items: center;
				border: px2vw(2) solid rgba(198, 215, 245, 1);

				.info-tab-item {
					width: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: rgba(255, 255, 255, 1);
					font-weight: bold;
					font-size: px2vw(38);

					&.info-tab-current {
						height: px2vh(100);
						margin: 0 px2vw(10);
						margin-right: px2vw(10);
						border-radius: px2vw(20);
						background-color: rgba(255, 255, 255, 0.7);
						color: rgba(65, 122, 220, 1);
						font-weight: Bold;
					}
				}
			}
		}
		.mainwrap{
			height: calc(100vh - px2vw(383));
		}
		main {
			width: calc(100% - #{px2vw(60)});
			margin-left: px2vw(30);
			height: calc(100vh - #{px2vh(590)});
			overflow-x: auto;

			.commonbj {
				background-color: #fff;
				margin-bottom: px2vh(30);

				.custom-title {
					display: flex;
					align-items: center;

					img {
						width: px2vh(42);
						margin-right: px2vw(29);
					}
				}
			}

			.commontitle {
				font-size: px2vh(40);
				color: #666666;
				font-weight: bold;
				margin-top: px2vh(60);
				margin-bottom: px2vh(27);

				.addoption {
					float: right;
					height: px2vh(46);
					margin-top: px2vh(10);
					margin-right: px2vw(50);
				}
			}

			.remark-info-container {
				padding: px2vh(70) px2vw(50);
				font-size: px2vw(42);
				color: #666666;
				border-radius: px2vw(20);
				overflow: hidden;
				background-color: #FFFFFF;
				margin-top: px2vh(40);
				margin-bottom: px2vh(40);

				.remark-wrap {
					background-color: #FAFAFA;
					border-radius: px2vw(20);

					.remark-text {
						height: px2vh(150);
					}
				}
			}

			.isrequired::before {
				content: "*";
				color: #FF4355;
				display: inline-block;

			}
		}

		footer {
			height: px2vh(155);
			background: #f2f6fa;
			padding-top: px2vh(45);

			/deep/ .van-button {
				width: calc(100% - #{px2vw(60)});
				margin-left: px2vh(30);
				height: px2vh(120);
				color: #fff;
				background-color: #417ADC;
				border: 1px solid #417ADC;
				border-radius: px2vh(60);
			}
		}

		.mainHeight {
			height: calc(100vh - #{px2vh(675)});
		}
		.task-list-container {
			height: calc(100vh - #{px2vh(443)} - 38px);
			overflow-y: scroll;
		
			.task-list {
				width: px2vw(1020);
				background: #fff;
				border-radius: px2vw(20) px2vh(20);
				margin: 0 px2vw(30) px2vh(30) px2vw(30);
		
				.task-title {
					width: px2vw(940);
					height: px2vh(80);
					margin-left: px2vw(40);
					padding-top: px2vw(30);
					margin-bottom: px2vh(30);
					display: flex;
					align-items: center;
					justify-content: space-between;
		
					.task-title-main {
						display: flex;
						align-items: center;
					}
		
					.task-title-main-text {
						width: px2vw(750);
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-left: px2vw(20);
						font-size: px2vh(48);
					}
		
					.task-status {
						width: px2vw(150);
						height: px2vh(50);
						line-height: px2vh(50);
						border-radius: px2vw(10);
						font-size: px2vw(32);
						text-align: center;
						margin-top: px2vw(8);
					}
		
					.left-state-ywc {
						color: #3CDA68;
						background: rgba(60, 218, 104, .1);
					}
		
					.left-state-dsp {
						color: #FFAD0E;
						background: rgba(255, 173, 14, .1);
					}
		
					.left-state-jj {
						color: #FF7070;
						background: rgba(255, 112, 112, .1);
					}
		
					.left-state-dzx {
						color: #417ADC;
						background: rgba(65, 122, 220, .1);
					}
		
					.left-state-ycx {
						color: #8C8C8C;
						background: rgba(140, 140, 140, .1);
					}
				}
		
				.task-hr {
					width: px2vw(940);
					border: px2vh(1) solid #e5e5e5;
					margin-left: px2vw(40);
					margin-bottom: px2vh(42);
				}
		
				.delBtn {
					height: 100%;
					background: #FF4355;
					border-radius: px2vw(0) px2vw(20) px2vw(20) px2vw(0);
				}
		
				.top-task-main {
					width: px2vw(900);
					font-size: px2vh(36);
					line-height: px2vh(62);
					margin-left: px2vw(60);
					padding-bottom: px2vw(30);
		
					.task-big-ltitle,
					.task-big-rtitle {
						color: #666;
					}
		
					.task-small-ltitle,
					.task-small-rtitle {
						margin-left: px2vw(25);
						color: #333;
					}
		
					.task-big-rtitle {
						margin-left: px2vw(40);
					}
				}
		
				/deep/.van-swipe-cell__right {
					//padding-top: px2vh(30);
				}
			}
		}
		
		.header-bar {
			.menu {
				width: px2vw(1020);
				height: px2vh(220);
				background-color: #fff;
				// background-image: url('../../../static/img/borderR.png');
				background-size: px2vw(1020) px2vh(220);
				//margin-left: px2vw(30);
				margin: 0 auto;
				display: flex;
				justify-content: space-evenly;
		
				li {
					//width: calc(1 * (100% - #{px2vw(400)}) / 4);
					height: 100%;
					//margin-left: px2vw(80);
					//float: left;
					position: relative;
		
					.right-box {
						height: px2vh(112);
						//margin-left:px2vw(10);
						float: left;
						margin-top: px2vh(59);
						text-align: center;
		
						.menu-num {
							display: block;
							font-size: px2vw(54);
							font-weight: bold;
							color: #333;
						}
		
						.menu-state {
							font-size: px2vw(36);
							color: rgba(51, 51, 51, .7);
						}
		
						.selectmenu {
							color: #417ADC;
						}
					}
		
					.sj {
						width: px2vw(78);
						height: px2vh(66);
						position: absolute;
						bottom: px2vh(-34);
						//right: px2vw(40);
						left: 50%;
						transform: translateX(-50%);
						background-image: url('../../../static/img/sj.png');
						background-size: px2vw(78) px2vh(66);
					}
				}
			}
		}
		.list-header {
			background-color: transparent!important;
		}


	}
</style>
